<template>
  <div id="app">
    <Head>我的订单</Head>
    <van-list
      class="list"
      v-model="loading"
      :finished="finished"
      :finished-text="finished_text"
      @load="onLoad"
      :immediate-check="false"
      v-if="show_empty != true"
    >
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="ordernum">
          订单号：{{item.order_sn}}
        </div>
        <div class="title">{{item.desc}}</div>
        <div class="line">订单名称<span class="color">{{item.title}}</span></div>
        <div class="line">支付时间<span class="color">{{item.paytime}}</span></div>
        <div class="line">订单金额<span class="money">{{item.amount}}</span></div>
      </div>
    </van-list>
    <van-empty
      image="search"
      description="没有找到对应的数据"
      style="background-color:#fff"
      v-if="show_empty === true"
    />
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'

export default {
  components: {
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      show_empty: false,
      params: {},
      list: []
    }
  },
  created () {
    this.fetchData(true)
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      this.loading = true
      http
        .get(api.city_order, conditions)
        .then((res) => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.list.length === 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.list{
  height: calc(100vh - 53px);
  background-color: #f2f4f3;
  overflow: auto;
  .item{
    margin-top: 7px;
    padding-bottom: 10px;
    background-color: #FFFFFF;
    .ordernum{
      padding-left: 16px;
      padding-right: 16px;
      border-bottom: 1px solid #f3f3f3;
      font-size: 13px;
      color: #999999;
      height: 42px;
      display: flex;
      align-items: center;
    }
    .title{
      margin-top: 15px;
      margin-bottom: 12px;
      margin-left: 16px;
      margin-right: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 16px;
      color: #333333;
    }
    .line{
      margin-bottom: 7px;
      margin-left: 16px;
      margin-right: 16px;
      font-size: 14px;
      color: #999999;
      .color{
        margin-left: 12px;
        color: #555555;
      }
      .money{
        margin-left: 12px;
        color: #ff6600;
      }
    }
  }
}
.list::-webkit-scrollbar{
    display: none;
}
</style>
